<template>
  <div>
    <Table
      ref="dataTable"
      stripe
      :loading="table.loading"
      :columns="table.tableColumns"
      :data="table.tableRows"
      style="margin-top:20px;"
      @on-select="select" @on-select-cancel="selectCancel"
               @on-select-all="selectAll" @on-select-all-cancel="selectAllCancel"
      @on-sort-change="changeSort"
    ></Table>
    <div style="margin: 20px; overflow: hidden">
      <div style="float: right;">
        <Page
          :total="pager.total"
          :current="pager.pageNo"
          @on-change="changePageNo"
          @on-page-size-change="changePageSize"
          showSizer
          showTotal
        ></Page>
      </div>
    </div>
  </div>
</template>

<script>
import * as utils from '@/api/utils-v2'

export default {
  name: 'ActivitiDeploymeTableMain',
  data() {
    return {
      urls: {
        searchUrl: '/process-activiti/admin/query/all-deployment'
      },
      pager: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      searchOpts: {
        sortColumn: null,
        sortOrder: null
      },
      table: {
        loading: false,
        tableColumns: [
          {
            type: 'selection',
            width: 52,
            key: 'id',
            align: 'center',
            fixed: 'left'
          },
          {
            width: 60,
            align: 'center',
            fixed: 'left',
            render: (h, params) => {
              return h(
                'span',
                params.index + (this.pager.pageNo - 1) * this.pager.pageSize + 1
              )
            }
          },
          {
            title: '流程编号',
            key: 'id',
            minWidth: 120,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '流程编号'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '流程编号',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '流程Name',
            key: 'name',
            minWidth: 120,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '流程Name'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '流程名称',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '流程Key',
            key: 'key',
            minWidth: 120,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '流程Key'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '流程的Key',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '部署时间',
            key: 'deploymentTime',
            minWidth: 120,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '部署时间'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '流程的部署时间',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '租户ID',
            key: 'tenantId',
            minWidth: 120,
            renderHeader: (h, params) => {
              return h('span', [
                h('span', '租户ID'),
                h(
                  'Tooltip',
                  {
                    props: {
                      content: '租户的ID',
                      placement: 'top',
                      transfer: true,
                      maxWidth: 500
                    }
                  },
                  [
                    h('Icon', {
                      props: {
                        type: 'ios-help-circle'
                      },
                      style: {
                        marginLeft: '3px'
                      }
                    })
                  ]
                )
              ])
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 130,
            align: 'center',
            fixed: 'right',
            render: (h, params) => {
              return h(
                'Dropdown',
                {
                  on: {
                    'on-click': itemName => {
                      this.userOpt(itemName, params.row)
                    }
                  },
                  props: {
                    transfer: true
                  }
                },
                [
                  h(
                    'Button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small'
                      }
                    },
                    [
                      '选择操作 ',
                      h('Icon', {
                        props: {
                          type: 'ios-arrow-down'
                        }
                      })
                    ]
                  ),
                  h(
                    'DropdownMenu',
                    {
                      slot: 'list'
                    },
                    [
                      h(
                        'DropdownItem',
                        {
                          props: {
                            name: 'showDetail'
                          }
                        },
                        '详情'
                      ),
                      h(
                        'DropdownItem',
                        {
                          props: {
                            name: 'remove'
                          }
                        },
                        [
                          h(
                            'span',
                            {
                              style: {
                                color: 'red'
                              }
                            },
                            '删除旧版本部署'
                          )
                        ]
                      )
                    ]
                  )
                ]
              )
            }
          }
        ],
        tableRows: [],
        selections: []
      }
    }
  },
  computed: {},
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.$emit('searchTable')
    },
    userOpt(itemName, row) {
      if (itemName === 'showDetail') {
        this.$emit('showDetailModal', JSON.parse(JSON.stringify(row)))
      } else if (itemName === 'remove') {
        this.$emit('removeOld', row)
      }
    },
    select(selections, row) {
              utils.select(this, selections, row)
            },
            selectCancel(selections, row) {
              utils.selectCancel(this, selections, row)
            },
            selectAll(selections) {
              utils.selectAll(this, selections)
            },
            selectAllCancel(selections) {
              utils.selectAllCancel(this, selections)
            },
    changeSort(sortColumn) {
      utils.changeSort(this, sortColumn)
    },
    changePageNo(pageNo) {
      utils.changePageNo(this, pageNo)
    },
    changePageSize(pageSize) {
      utils.changePageSize(this, pageSize)
    }
  }
}
</script>

<style>
</style>
